var ProfileUserInfoView = Backbone.View.extend({

});


var ProfileUserSettingView = Backbone.View.extend({

});

var ProfileUserAvatarView = Backbone.View.extend({

    events: function() {

    },

    initialize: function() {
        var self = this;

        self.$('#photo').imgAreaSelect({
            handles: true,
            onSelectEnd: self.onSelectEnd()
        });

        // upload image
        $fub = self.$('#fine-uploader-basic');
        $messages = self.$('#messages');

        var uploader = new qq.FineUploaderBasic({
            button: $fub[0],
            request: {
                endpoint: '/LuojiaOJ/profile/saveAsUserAvator'
            },
            validation: {
                allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
                sizeLimit: 204800 // 200 kB = 200 * 1024 bytes
            },
            callbacks: {
                onSubmit: function(id, fileName) {
                    $messages.html('<div id="file-' + id + '" class="alert" style="margin: 20px 0 0"></div>');
                },
                onUpload: function(id, fileName) {
                    $('#file-' + id).addClass('alert-info')
                        .html('<img src="../static/image/upload/loading.gif" alt="Initializing. Please hold."> ' +
                        'Initializing ' +
                        '“' + fileName + '”');
                },
                onProgress: function(id, fileName, loaded, total) {
                    if (loaded < total) {
                        progress = Math.round(loaded / total * 100) + '% of ' + Math.round(total / 1024) + ' kB';
                        $('#file-' + id).removeClass('alert-info')
                            .html('<img src="../static/image/upload/loading.gif" alt="In progress. Please hold."> ' +
                            'Uploading ' +
                            '“' + fileName + '” ' +
                            progress);
                    } else {
                        $('#file-' + id).addClass('alert-info')
                            .html('<img src="../static/image/upload/loading.gif" alt="Saving. Please hold."> ' +
                            'Saving ' +
                            '“' + fileName + '”');
                    }
                },
                onComplete: function(id, fileName, responseJSON) {
                    if (responseJSON.success) {
                        $('#file-' + id).removeClass('alert-info')
                            .addClass('alert-success span6')
                            .html('<i class="icon-ok"></i> ' +
                            'Successfully saved ' +
                            '“' + fileName + '”');
                    } else {
                        $('#file-' + id).removeClass('alert-info')
                            .addClass('alert-error')
                            .html('<i class="icon-exclamation-sign"></i> ' +
                            'Error with ' +
                            '“' + fileName + '”: ' +
                            responseJSON.error);
                    }
                }
            },
            debug: true
        });
    },

    onSelectEnd: function() {

    }

});

var ProfileView = Backbone.View.extend({
    events: {
        'click .userInfoNav': 'e_selectUserInfo',
        'click .userSettingNav': 'e_selectUserSetting',
        'click .userAvatarNav': 'e_selectUserAvatar'
    },

    initialize: function() {
//        console.log('ProfileView initialize');
        var self = this;
        /** 初始查看用户信息 */
        self.model.set({selected: 'userInfo'});
        self.model.on('change:selected', self.onSelectedChange, self);
    },

    e_selectUserInfo: function() {
        var self = this;
        self.switchChange("userInfo");
        var profileUserInfoModel = new ProfileUserInfoModel();
//        var profileUserInfoView = new ProfileUserInfoView({model: profileUserInfoModel});
    },

    e_selectUserSetting: function() {
        var self = this;
        self.switchChange("userSetting");
        var profileUserSettingModel = new ProfileUserSettingModel();
//        var profileUserSettingView = ProfileUserSettingView({model: profileUserSettingModel});
    },

    e_selectUserAvatar: function() {
        var self = this;
        self.switchChange("userAvatar");
    },

    /** 统一管理选择改变 */
    switchChange: function (toSelected) {
        var self = this;
        if (self.model.get("selected") != toSelected) {
            self.model.set({selected: toSelected});
        }
    },

    onSelectedChange: function() {
        var self = this;
        var selected = self.model.get("selected"),
            previousSelected = self.model.previous("selected"),
            contents = self.$(".contents");
        if (previousSelected) {
            contents.removeClass(previousSelected);
        }
        contents.addClass(selected).empty();
        switch(selected) {
            case 'userInfo':
                self.loadUserInfo();
                break;
            case 'userSetting':
                self.loadUserSetting();
                break;
            case 'userAvatar':
                self.loadUserAvatar();
                break;
            default:
                break;
        }
    },

    loadUserInfo: function() {
//        console.log('loadUserInfo');
        var self = this;
        var selected = self.model.get("selected"),
            contents = self.$(".content");
        contents.load(self.model.get('urls')[selected], self.model.toJSON(), function(data) {
//            console.log('loadUserSetting success!');
        });
    },

    loadUserSetting: function() {
//        console.log('loadUserSetting');
        var self = this;
        var selected = self.model.get("selected"),
            contents = self.$(".content");
        contents.load(self.model.get('urls')[selected], self.model.toJSON(), function(data) {
//            console.log('loadUserSetting success!');
        });
//        $.post(self.model.get("urls")[selected], self.model.toJSON());
    },

    loadUserAvatar: function() {
//        console.log('loadUserAvatar');
        var self = this;
        var selected = self.model.get("selected"),
            contents = self.$(".content");
        contents.load(self.model.get('urls')[selected], self.model.toJSON(), function(data) {
//            console.log('loadUserSetting success!');
            var profileUserAvatarModel = new ProfileUserAvatarModel();
            var profileUserAvatarView = new ProfileUserAvatarView({el: contents, model: profileUserAvatarModel});
        });

    }

});